<template>
	<view class="register">
		<view class="icon" @click="toWellcome">
			<image class="backImage" src="../../static/back.png" mode=""></image>
		</view>
		<form @submit="formSubmit">
			<view class="regContent">
				
				<view class="fontWeight fs50">输入你的 <text class="loginBackColor">电话号码</text> </view>
				<view class="mt60">还没有账号?  <text class="loginBackColor" @click="toRegister">注册</text> </view>
				<view class="mt60 utell">
					<image class="tellImage" src="../../static/tell.png" mode=""></image>
					<input type="number" v-model="uTell" placeholder="请输入手机号" />
				</view>
				<view class="mt60 utell">
					<image class="tellImage" src="../../static/pwd.png" mode=""></image>
					<input type="password" v-model="uPwd" value="" placeholder="请输入密码" />
				</view>
				<button style="width: 100%;" form-type="submit" class="mt60" type="default">立即登录</button>				
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uTell:"",
				uPwd:""
			}
		},
		methods: {
			// 点击返回按钮，跳转到欢迎页面
			toWellcome(){
				uni.navigateTo({
				    url: '../wellcome/wellcome'
				});
			},
			formSubmit(e){
				console.log("this.uTell = ",this.uTell)
				//调用注册接口
				uni.request({
				    url: this.httpUserUrl+'user/login', //仅为示例，并非真实接口地址。
				    data: {
				        utell: this.uTell,
						upwd:this.uPwd
				    },
					method:"post",
				     header: {
						  "Content-Type": "application/x-www-form-urlencoded"
					},
				    success: (res) => {
				       console.log("登录返回，",res.data)
					   if(res.data.code!="0"){
							uni.showToast({
								title: res.data.msg,
								icon:"error",
								duration: 2000
							});
					   }else{
							uni.showToast({
								title: "登录成功",
								duration: 2000
							});
							//把token放入本地缓存  res.data.data token作为用户已登录凭证
							uni.setStorage({
								key:"token",
								data:res.data.data
							})
							
							//跳转页面   tabbar页面
							let remindInfoDelayTimeId = setTimeout(()=>{
								uni.switchTab({
								    url: "../index/index",
								});
								clearTimeout(remindInfoDelayTimeId);
							},2000);
						   }
						}
				});
			},
			toRegister(){
				uni.navigateTo({
					url:"../register/register"
				})
			}
		}
	}
</script>

<style>
	.register{
		padding-top: 100rpx;
	}
	.icon{
		width: 60rpx;
		height: 60rpx;
		background-color: #ffe8e8;
		text-align: center;
		align-items: center;
		display: flex;
		justify-content: center;
		border-radius: 40%;
		margin-left: 80rpx;
	}
	.icon image{
		margin-left: 16rpx;
	}
	.regContent{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 180rpx;
		color: #48647a;
	}
	.utell{
		display: flex;
		align-items: center;
	}
	.utell input{
		margin-left: 16rpx;
		border-bottom: 1px solid #f5f5f5;
		padding: 14rpx 16rpx;
		border-radius: 20rpx;
	}
	.tellImage{
		width: 70rpx;
		height: 70rpx;
	}
</style>
